// content.js
console.log('内容脚本已注入');

// 动态创建容器
const container = document.createElement('div');
container.id = 'vue-element-extension';
container.style.cssText = 'position:fixed; top:20px; right:20px; z-index:9999; background:white; padding:15px; border-radius:4px; box-shadow:0 2px 10px rgba(0,0,0,0.1);';
document.body.appendChild(container);

// 加载Vue和Element UI
const loadScripts = () => {
    return new Promise((resolve) => {
        // 加载Vue
        const vueScript = document.createElement('script');
        vueScript.src = chrome.runtime.getURL('vue.global.prod.js');
        document.head.appendChild(vueScript);
        
        // 加载Element UI
        const elementScript = document.createElement('script');
        elementScript.src = chrome.runtime.getURL('element-plus.full.min.js');
        
        // 加载Element UI样式
        const elementStyle = document.createElement('link');
        elementStyle.rel = 'stylesheet';
        elementStyle.href = chrome.runtime.getURL('element-plus.min.css');
        document.head.appendChild(elementStyle);
        
        // 所有脚本加载完成后解析
        let loaded = 0;
        const checkLoaded = () => {
            if (loaded === 2) resolve();
        };
        
        vueScript.onload = () => {
            loaded++;
            checkLoaded();
        };
        
        elementScript.onload = () => {
            loaded++;
            checkLoaded();
        };
        
        document.head.appendChild(elementScript);
    });
};

// 初始化Vue应用
loadScripts().then(() => {
    // 确保Vue和Element UI全局变量已定义
    if (window.Vue && window.ElementPlus) {
        const { createApp } = Vue;
        
        const app = createApp({
            template: `
                <el-card class="box-card">
                    <template #header>
                        <div class="clearfix">
                            <span>Vue Element 插件</span>
                            <el-button style="float: right; padding: 3px 0" type="text" @click="close">关闭</el-button>
                        </div>
                    </template>
                    <div>
                        <el-button @click="fetchData">获取数据</el-button>
                        <el-button @click="highlightTitles">高亮标题</el-button>
                        
                        <el-alert
                            title="状态"
                            :description="status"
                            type="info"
                            :closable="false"
                            style="margin: 15px 0"
                        />
                        
                        <el-table :data="tableData" stripe style="width: 100%">
                            <el-table-column prop="id" label="ID" width="80"></el-table-column>
                            <el-table-column prop="name" label="名称"></el-table-column>
                            <el-table-column prop="status" label="状态">
                                <template #default="scope">
                                    <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
            `,
            data() {
                return {
                    tableData: [],
                    status: '就绪'
                };
            },
            methods: {
                fetchData() {
                    this.status = '加载中...';
                    
                    // 向后台脚本发送消息
                    chrome.runtime.sendMessage({ action: 'fetchData' }, (response) => {
                        if (response.success) {
                            this.tableData = response.data;
                            this.status = '数据加载成功';
                        } else {
                            this.status = '数据加载失败';
                        }
                    });
                },
                highlightTitles() {
                    // 向页面注入CSS
                    const style = document.createElement('style');
                    style.textContent = 'h1 { background-color: yellow !important; }';
                    document.head.appendChild(style);
                    this.status = '标题已高亮';
                },
                close() {
                    document.getElementById('vue-element-extension').remove();
                },
                getStatusType(status) {
                    switch (status) {
                        case '活跃': return 'success';
                        case '已完成': return 'info';
                        case '暂停': return 'warning';
                        default: return 'info';
                    }
                }
            }
        });
        
        // 使用Element UI
        app.use(ElementPlus);
        
        // 挂载应用
        app.mount('#vue-element-extension');
    }
});    